
/* 浮动 */

.fl {float: left;}
.fr {float: right;}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 单行文字溢出省略 */

.t-el {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 多行文字溢出省略 */

.ts-el {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-wrap: break-word;
}

/* 行内块元素 */

.d-ib { display: inline-block }
.va-m { vertical-align: middle }

/* 定位 */

.p-r { position: relative; }
.p-a { position: absolute; }
.p-f { position: fixed; }

.t-0 { top: 0;}
.t-5 { top: 5px; }
.t-10 { top: 10px; }
.t-15 { top: 15px; }
.t-20 { top: 20px; }
.t-25 { top: 25px; }
.t-30 { top: 30px; }
.t-35 { top: 35px; }
.t-40 { top: 40px; }
.t-45 { top: 45px; }
.t-50 { top: 50px; }
.t-55 { top: 55px; }
.t-60 { top: 60px; }

.r-0 { right: 0 }
.r-5 { right: 5px; }
.r-10 { right: 10px; }
.r-15 { right: 15px; }
.r-20 { right: 20px; }
.r-25 { right: 25px; }
.r-30 { right: 30px; }
.r-35 { right: 35px; }
.r-40 { right: 40px; }
.r-45 { right: 45px; }
.r-50 { right: 50px; }
.r-55 { right: 55px; }
.r-60 { right: 60px; }

.b-0 { bottom: 0; }
.b-5 { bottom: 5px; }
.b-10 { bottom: 10px; }
.b-15 { bottom: 15px; }
.b-20 { bottom: 20px; }
.b-25 { bottom: 25px; }
.b-30 { bottom: 30px; }
.b-35 { bottom: 35px; }
.b-40 { bottom: 40px; }
.b-45 { bottom: 45px; }
.b-50 { bottom: 50px; }
.b-55 { bottom: 55px; }
.b-60 { bottom: 60px; }

.l-0 { left: 0; }
.l-5 { left: 5px; }
.l-10 { left: 10px; }
.l-15 { left: 15px; }
.l-20 { left: 20px; }
.l-25 { left: 25px; }
.l-30 { left: 30px; }
.l-35 { left: 35px; }
.l-40 { left: 40px; }
.l-45 { left: 45px; }
.l-50 { left: 50px; }
.l-55 { left: 55px; }
.l-60 { left: 60px; }

/* 边距 */

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mt-55 { margin-top: 55px; }
.mt-60 { margin-top: 60px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-35 { margin-right: 35px; }
.mr-40 { margin-right: 40px; }
.mr-45 { margin-right: 45px; }
.mr-50 { margin-right: 50px; }
.mr-55 { margin-right: 55px; }
.mr-60 { margin-right: 60px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.mb-55 { margin-bottom: 55px; }
.mb-60 { margin-bottom: 60px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.ml-30 { margin-left: 30px; }
.ml-35 { margin-left: 35px; }
.ml-40 { margin-left: 40px; }
.ml-45 { margin-left: 45px; }
.ml-50 { margin-left: 50px; }
.ml-55 { margin-left: 55px; }
.ml-60 { margin-left: 60px; }

/* 填充 */

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pt-55 { padding-top: 55px; }
.pt-60 { padding-top: 60px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }
.pr-55 { padding-right: 55px; }
.pr-60 { padding-right: 60px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pb-55 { padding-bottom: 55px; }
.pb-60 { padding-bottom: 60px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pl-55 { padding-left: 55px; }
.pl-60 { padding-left: 60px; }

/* 水平居中 */

.m-lr-5 { margin: 0 5px; }
.m-lr-10 { margin: 0 10px; }
.m-lr-15 { margin: 0 15px; }
.m-lr-20 { margin: 0 20px; }
.m-lr-25 { margin: 0 25px; }
.m-lr-30 { margin: 0 30px; }
.m-lr-35 { margin: 0 35px; }
.m-lr-40 { margin: 0 40px; }
.m-lr-45 { margin: 0 45px; }
.m-lr-50 { margin: 0 50px; }
.m-lr-55 { margin: 0 55px; }
.m-lr-60 { margin: 0 60px; }

.p-lr-5 { padding: 0 5px; }
.p-lr-10 { padding: 0 10px; }
.p-lr-15 { padding: 0 15px; }
.p-lr-20 { padding: 0 20px; }
.p-lr-25 { padding: 0 25px; }
.p-lr-30 { padding: 0 30px; }
.p-lr-35 { padding: 0 35px; }
.p-lr-40 { padding: 0 40px; }
.p-lr-45 { padding: 0 45px; }
.p-lr-50 { padding: 0 50px; }
.p-lr-55 { padding: 0 55px; }
.p-lr-60 { padding: 0 60px; }

/* 垂直居中 */

.m-tb-5 { margin: 5px 0; }
.m-tb-10 { margin: 10px 0; }
.m-tb-15 { margin: 15px 0; }
.m-tb-20 { margin: 20px 0; }
.m-tb-25 { margin: 25px 0; }
.m-tb-30 { margin: 30px 0; }
.m-tb-35 { margin: 35px 0; }
.m-tb-40 { margin: 40px 0; }
.m-tb-45 { margin: 45px 0; }
.m-tb-50 { margin: 50px 0; }
.m-tb-55 { margin: 55px 0; }
.m-tb-60 { margin: 60px 0; }

.p-tb-5 { padding: 5px 0; }
.p-tb-10 { padding: 10px 0; }
.p-tb-15 { padding: 15px 0; }
.p-tb-20 { padding: 20px 0; }
.p-tb-25 { padding: 25px 0; }
.p-tb-30 { padding: 30px 0; }
.p-tb-35 { padding: 35px 0; }
.p-tb-40 { padding: 40px 0; }
.p-tb-45 { padding: 45px 0; }
.p-tb-50 { padding: 50px 0; }
.p-tb-55 { padding: 55px 0; }
.p-tb-60 { padding: 60px 0; }


/* 弹性盒模型 */

.d-f { display: flex }

.fg-1 { flex-grow: 1; }
.fg-2 { flex-grow: 2; }
.fg-3 { flex-grow: 3; }
.fg-4 { flex-grow: 4; }
.fg-5 { flex-grow: 5; }
.fg-6 { flex-grow: 6; }

.fd-rr { flex-direction: row-reverse; }
.fd-c { flex-direction: column; }
.fd-cr { flex-direction: column-reverse; }

.jc-fe { justify-content: flex-end; }
.jc-c { justify-content: center; }
.jc-sa { justify-content: space-around; }
.jc-sb { justify-content: space-between; }
.jc-se { justify-content: space-evenly; }

.ai-fe { align-items: flex-end; }
.ai-c { align-items: center; }
.ai-s { align-items: stretch; }

.as-fs { align-self: flex-start; }
.as-c { align-self: center; }
.as-fe { align-self: flex-end; }
.as-s { align-self: stretch; }

.fw-w { flex-wrap: wrap; }
.fw-wr { flex-wrap: wrap-reverse; }

.ac-fe { align-content: flex-end; }
.ac-c { align-content: center; }
.ac-sa { align-content: space-around; }
.ac-sb { align-content: space-between; }
.ac-s { align-content: stretch; }
